<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <title>完整图片tab</title>
</head>
<style>
    body {
        background-color: red;
    }
    
    div {
        width: 100%;
        border: 1px solid #ddd;
        height: 60px;
        display: none;
        cursor: pointer;
    }
    
    nav {
        margin-bottom: 40px;
        background-color: white;
    }
    
    .home-div {
        display: block;
    }
    
    .stacked {
        position: relative;
    }
    
    .stacked li {
        width: 97px;
        border: 1px solid #ddd;
    }
    
    .stacked div {
        position: absolute;
        top: 0;
        left: 0;
        height: 126px;
        margin-left: 95.82px;
        z-index: 99;
        overflow: hidden;
    }
</style>
<script>
    $(function() {
        var toggle = '[data-toggle="tab"] li a';
        var toggleFn = function(e) {
            var dropdownToggle = $(this);
            console.log(dropdownToggle.text());
            var dropdown = dropdownToggle.parent();
            var big = dropdown.parents("nav");
            $(".messages-div").css("display", "none");
            $(".dropdown-div").css("display", "none");
            if (dropdownToggle.text() == "Home") {
                $(".home-div").css("display", "block");
                $(".messages-div").css("display", "none");
                $(".dropdown-div").css("display", "none");
            } else if (dropdownToggle.text() == "Messages") {
                $(".home-div").css("display", "none");
                $(".messages-div").css("display", "block");
                $(".dropdown-div").css("display", "none");
            } else if (dropdownToggle.text() == "Dropdown") {
                $(".home-div").css("display", "none");
                $(".messages-div").css("display", "none");
                $(".dropdown-div").css("display", "block");
            }
            var dropdown = dropdownToggle.parent();
            var dropdownSlib = dropdown.siblings();
            dropdownSlib.removeClass("active");
            dropdown.addClass("active");

        }
        $(document).on("click", toggle, toggleFn);
    })
</script>

<body>
    <nav>
        <ul class="nav nav-tabs" data-toggle="tab">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Messages</a></li>
            <li><a href="#">Dropdown</a></li>
        </ul>
        <div class="home-div">
            Home abcdefghijklmnopqrstuvwxyz
        </div>
        <div class="messages-div">
            messages abcdefghijklmnopqrstuvwxyz
        </div>
        <div class="dropdown-div">
            dropdown abcdefghijklmnopqrstuvwxyz
        </div>
    </nav>


    <nav>
        <div class="home-div">
            Home abcdefghijklmnopqrstuvwxyz
        </div>
        <div class="messages-div">
            messages abcdefghijklmnopqrstuvwxyz
        </div>
        <div class="dropdown-div">
            dropdown abcdefghijklmnopqrstuvwxyz
        </div>
        <ul class="nav nav-tabs" data-toggle="tab">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Messages</a></li>
            <li><a href="#">Dropdown</a></li>
        </ul>

    </nav>




    <nav class="stacked">
        <ul class="nav nav-tabs nav-stacked" data-toggle="tab">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Messages</a></li>
            <li><a href="#">Dropdown</a></li>
        </ul>
        <div class="home-div">
            Home abcdefghijklmnopqrstuvwxyz
        </div>
        <div class="messages-div">
            messages abcdefghijklmnopqrstuvwxyz
        </div>
        <div class="dropdown-div">
            dropdown abcdefghijklmnopqrstuvwxyz
        </div>
    </nav>


    <nav>
        <ul class="nav nav-pills" data-toggle="tab">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Messages</a></li>
            <li><a href="#">Dropdown</a></li>
        </ul>
        <div class="home-div">
            Home abcdefghijklmnopqrstuvwxyz
        </div>
        <div class="messages-div">
            messages abcdefghijklmnopqrstuvwxyz
        </div>
        <div class="dropdown-div">
            dropdown abcdefghijklmnopqrstuvwxyz
        </div>
    </nav>

</body>

</html>